<template>
  <div class="saleRank" :class="{ 'fixed-box': isFixed }">
    <header class="saleRank-head">- {{ saleRankList.name }} -</header>
    <ul class="saleRank-list" @click="toSaleRank">
      <li
        class="saleRant-item"
        v-for="sr in saleRankList.subSaleRankList"
        :key="sr.id"
        :data-id="sr.id"
      >
        <img
          class="saleRant-img"
          :src="sr.imgUrl"
          :alt="sr.imgUrl"
          :data-id="sr.id"
        />
        <span class="saleRant-title" :data-id="sr.id"
          >{{ sr.name.substring(0, 2) }}<br />{{
            sr.name.substring(2, 5)
          }}</span
        >
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
export default {
  name: "SaleRank",
};
</script>
<script setup lang="ts">
  import { useRouter } from "vue-router";
  import { useHomeStore } from "@/stores/modules/home";
  import { storeToRefs } from "pinia";
  import { onMounted, ref } from "vue";
  const homeStore = useHomeStore();
  const { getSaleRankList } = homeStore;
  const { saleRankList } = storeToRefs(homeStore);
  const router = useRouter();
  type Props = {
    isFixed: boolean;
  };
  defineProps<Props>();
  onMounted(() => {
    getSaleRankList();
  });
  const toSaleRank = (e) => {
    const categoryId = e.target.dataset.id;
    if (categoryId) {
      router.push(`/salerank?categoryId=${categoryId}`);
    }
    if (e.target.dataset.id == 0) {
      router.push(`/salerank`);
    }
  };
</script>
<style scoped lang="less">
.saleRank {
  position: absolute;
  top: 630px;
  left: 55px;
  width: 108px;
  border: 1px solid #d6d4cc;
  border-radius: 4px;

  .saleRank-head {
    text-align: center;
    padding: 10.5px 0;
    border-bottom: 1px solid #d6d4cc;
    color: #ac3245;
    font-size: 16px;
    font-weight: bold;
    background-image: v-bind("'url('+saleRankList.imgUrl+')'");
  }

  .saleRank-list {
    background-color: #ffffff;
    color: #333;

    .saleRant-item {
      width: 86px;
      height: 35px;
      margin: 0 auto;
      display: flex;
      cursor: pointer;

      &:not(:last-child) {
        border-bottom: 1px solid #d6d4cc;
      }

      &:first-child {
        color: #ac3245;
      }

      &:first-child .saleRant-title {
        font-weight: bold;
      }

      &:hover {
        color: #ac3245;
      }

      .saleRant-img {
        width: 30px;
        height: 30px;
        padding: 2.5px 0;
      }

      .saleRant-title {
        display: inline-block;
        width: 56px;
        height: 35px;
        font-size: 12px;
        box-sizing: border-box;
        padding-left: 7px;
        padding-top: 5.5px;
      }
    }
  }
}

.fixed-box {
  top: 200px;
  position: fixed;
}
</style>
